<template>
  <div class="panel-wrapper" :class="sceneStore.rightPanelVisible ? 'active' : ''">
    <div class="panel-inner">
      <div class="panel-handler" @click="toggleVisible">
        <SvgIcon icon-class="ic_展开" />
      </div>
      <div class="panel">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';

const sceneStore = useSceneStore();

defineOptions({
  name: 'RightPanel',
});

const toggleVisible = () => {
  sceneStore.rightPanelVisible = !sceneStore.rightPanelVisible;
};
</script>

<style lang="less" scoped>
.panel-wrapper {
  position: absolute;
  top: 0;
  left: 100vw;
  width: 336px;
  height: 100%;
  background: #0a0b0d;
  z-index: 1;
  transition: left 0.4s ease-out;

  .panel-inner {
    position: relative;
    height: 100%;

    .panel-handler {
      position: absolute;
      top: 0;
      // right: 336px;
      left: -28px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      font-size: 18px;
      border-radius: 4px;
      background: var(--el-color-primary);
      cursor: pointer;

      .svg-icon {
        transform: rotate(0deg);
        cursor: grab;
      }
    }

    .panel {
      height: 100%;
    }
  }

  &.active {
    left: calc(100vw - 336px);

    .panel-handler .svg-icon {
      transform: rotate(180deg);
    }
  }
}
</style>
